﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

</head>
<body>
    <div>当前用户：<span class="id"></span><span class="user"></span></div>
    <div class="userList">
    </div>
    <div class="chat">
    </div>
    <div>
        <input class="userid" type="text" />
        <input class="txt" type="text" />
        <input class="btn" type="button" value="发送消息" />
    </div>

</body>
</html>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--引用这个自动生成 SignalR hub 的脚本-->
<script src="signalr/hubs"></script>

<script>
    $(document).ready(function () {
        //这个东西弹出输入名称  无关紧要
        $(".user").text(prompt('输入你的名称:', ''));

        //定义一个引用代理的hub
        //MyHub这个名称要和定义的继承自HUB类的[HubName("MyHub")]一样
        var chat = $.connection.MyHub;

        //当连接建立完成对时候执行的方法
        $.connection.hub.start().done(function () {
            $(".chat").append("<div>连接建立完成...</div>");
            //给其他用户发送，XXX登录了
            chat.server.userConnected($(".user").text());
        });

        //新用户上线得到所有列表
        chat.client.getUser = function (userList) {
            var div = "";
            $.each(userList, function (index, user) {
                div += "<div id='" + user.id + "'>" + user.id + "===" + user.name + "</div>";
            })
            $(".userList").append(div);
        }

        //老用户，需要添加更登录的用户
        chat.client.addUser = function (id, user) {
            $(".userList").append("<div id='" + id + "'>" + id + "===" + user + "</div>");
        }

        //用户退出登录时
        chat.client.removeUser = function (id, name) {
            $(".chat").append("<div>用户：" + name + "已退出系统...</div>");
            $("#" + id).remove();
        }

        //点击发送消息时候，先调用服务器方法，服务器会回调客户端方法
        $(".btn").click(function () {
            if ($(".userid").val() != "") {
                chat.server.sendToUser($(".userid").val(), $(".user").text(), $(".txt").val());
            }
            else {
                chat.server.sendAll($(".user").text(), $(".txt").val());
            }
        });

        //创建一个客户端方法，可以让hub类调用这个方法
        chat.client.showMessage = function (name, message) {
            $(".chat").append("<div>" + name + "说:" + message + "</div>");
        };

        //发送私密消息
        chat.client.secretMessage = function (name, message) {
            $(".chat").append("<div>" + name + "秘密对你说:" + message + "</div>");
        }

        //用户登录通知的方法
        chat.client.hello = function (user) {
            $(".chat").append("<div>用户：" + user + "已登录了...</div>");
        }

    });

</script>
